<template>
  <view class="fault">
    <view class="icon-close" @click="onClose">
      <i-icon icon="iconguanbi" color="#999" size="40rpx"></i-icon>
    </view>
    <view class="title-box"><text>故障上报</text></view>
    <view class="content">
      <scroll-view class="scroll" scroll-y>
        <view class="cell" v-for="(item, index) in list" :key="index">
          <view class="title"><text>{{item.title}}</text></view>
          <view class="child">
            <view class="item" :class="{active: i.selected}" v-for="(i, k) in item.child" :key="k" @click="onClickItem(index, k)"><text>{{i.title}}</text></view>
          </view>
        </view>
        <view class="upload-img">
          <view class="title">
            <text><text class="bold">上传照片</text>(选填）</text>
            <text>{{imgs.length}}/3</text>
          </view>
          <view class="list">
            <view class="item" v-for="(item, index) in imgs" :key="index">
              <image class="img" :src="item"></image>
              <view class="icon-del" @click="onDelImg(index)">
                <i-icon icon="iconguanbi" color="#999" size="26rpx"></i-icon>
              </view>
            </view>
            <view class="item upload" @click="onChooseImg" v-if="imgs.length<3">
              <i-icon icon="iconxiangji" color="#D0D0D0" size="50rpx"></i-icon>
            </view>
          </view>
        </view>
        <view class="remarks-box">
          <view class="remarks">
            <view class="text-area">
              <u-input v-model="value" type="textarea" placeholder="问题补充描述（选填）" height="120" :auto-height="true" :clearable="false" maxlength="140" />
            </view>
            <view class="num"><text>{{value.length}}/140</text></view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="btn-box">
      <view class="btn" :class="{active: submitState}" @click="onClickSubmit"><text>提交</text></view>
    </view>
    
    <u-popup v-model="show" mode="center" border-radius="20" width="540" :mask-close-able="false">
      <view class="leave-popup">
        <view class="title"><text>确定离开吗？</text></view>
        <view class="content">
          <text>客官，如果由于小七瓦特了影像您 的洗车体验，麻烦上报一下呢！</text>
        </view>
        <view class="btn-box">
          <view class="btn left" @click="show = false"><text>留下</text></view>
          <view class="btn right" @click="onLeave"><text>离开</text></view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: '水枪',
          type: 'water',
          type1: 'Gun_Description',
          child: [
            {
              selected: false,
              id: 1,
              title: '不出水'
            },
            {
              selected: false,
              id: 2,
              title: '水压小'
            },
            {
              selected: false,
              id: 3,
              title: '水枪损坏'
            },
            {
              selected: false,
              id: 4,
              title: '水管破损'
            }
          ]
        },
        {
          title: '泡沫枪',
          type: 'bubble',
          type1: 'Description',
          child: [
            {
              selected: false,
              id: 1,
              title: '无泡沫'
            },
            {
              selected: false,
              id: 2,
              title: '泡沫少'
            },
            {
              selected: false,
              id: 3,
              title: '泡沫枪损坏'
            },
            {
              selected: false,
              id: 4,
              title: '泡沫管损坏'
            }
          ]
        },
        {
          title: '吸尘器',
          type: 'cleaner',
          type1: 'Description',
          child: [
            {
              selected: false,
              id: 1,
              title: '无法启动'
            },
            {
              selected: false,
              id: 2,
              title: '吸力小'
            },
            {
              selected: false,
              id: 3,
              title: '吸尘器头破损'
            }
          ]
        },
        {
          title: '主机',
          type: 'machine',
          type1: 'Description',
          child: [
            {
              selected: false,
              id: 1,
              title: '外壳破损'
            },
            {
              selected: false,
              id: 2,
              title: '屏幕损坏'
            }
          ]
        },
        {
          title: '场地',
          type: 'station',
          type1: 'Description',
          child: [
            {
              selected: false,
              id: 1,
              title: '脏污'
            },
            {
              selected: false,
              id: 2,
              title: '堵塞'
            }
          ]
        }
      ],
      value: '',
      show: false,
      imgs: [],
			selected:[]
    }
  },
  props: {
    orderId: {
      type: String,
      default: ''
    }
  },
  watch: {
    orderId() {}
  },
  computed: {
    submitState() {
      let option = ''
      this.list.map(item => {
        item.child.map(i => {
          if(i.selected) {
            option = true
          }
        })
      })
      if(option || this.imgs.length > 0 || this.value) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    onClose() {
      this.show = true
    },
    onLeave() {
      this.$emit('onClose')
    },
    onChooseImg() {
      uni.chooseImage({
        count: 3 - this.imgs.length,
        success: res => {
          this.imgs = this.imgs.concat(res.tempFilePaths)
        }
      })
    },
    onDelImg(index) {
      this.imgs.splice(index, 1)
    },
    onClickItem(index, key) {
      this.list[index].child.map((i, k) => {
        i.selected = k === key ? !i.selected : false
      })
      this.list = this.list
    },
    // 上传图片
    uploadImg(files) {
      return new Promise(async (resolve, reject) => {
        try{
          let file = await this.$api.files.uploadImg({
            filePath: files
          })
          resolve({pic_URL: file.baseUrl + file.url})
        }catch(e){
          reject(e)
        }
      })
    },
    onClickSubmit() {
      if(!this.submitState) {
        return false
      }
			if(this.imgs.length>0){
				this.list.map(item =>{
					item.child.map(item2 =>{
						if(item2.selected===false){
							this.selected.push(item2)
						}
					})
				})
				if(this.selected.findIndex(v=>v.selected===true)==-1){
					uni.showToast({
						title:'请至少选一个故障',
						icon:'none'
					})
					return
				}
			}
      uni.showModal({
        title: '温馨提示',
        content: '是否确定提交？',
        confirmText: '是',
        cancelText: '否',
        confirmColor: '#FBB000',
        success: res => {
          if(res.confirm) {
            let params = {
              self_Service_Car_Wash_Order_Id: this.orderId
            }
            this.list.map(item => {
              let selected = item.child.filter(i => {
                return i.selected
              })
							console.log(selected.length)
              if(selected.length > 0) {
                if(item.type === 'water') {
                  params[item.type + '_Gun_Status'] = selected[0].id
                } else {
                  params[item.type + '_Status'] = selected[0].id
                }
                params[item.type + '_' + item.type1] = selected[0].title
              }
            })
            if(this.value) {
              params.fault_Description = this.value
            }
            if(this.imgs.length > 0) {
              let arr = this.imgs.map(async item => {
                return await this.uploadImg(item)
              })
              uni.showLoading({
                title: '图片上传中'
              })
              Promise.all(arr).then(data => {
                params.addSelfServiceCarWashOrderFaultPictures = data
                this.onSubmit(params)
              }).catch(err => {
                uni.hideLoading()
                uni.showToast({
                  icon: 'none',
                  title: '图片上传失败'
                })
              })
            } else {
              this.onSubmit(params)
            }
          }
        },
      })
    },
    async onSubmit(params) {
      uni.showLoading({
        title: '提交中',
        mask: true
      })
      try{
        let res = await this.$api.selfServiceCarWash.AddFault(params)
        uni.hideLoading()
        if(res.code === 200) {
          uni.showToast({
            icon: 'none',
            title: '感谢您提交的故障上报，我们将尽快处理!'
          })
          this.$emit('onClose')
        } else {
          uni.showToast({
            icon: 'none',
            title: '小7脑子瓦特了，麻烦重新提交呐！'
          })
        }
      }catch(e){
        uni.hideLoading()
        uni.showToast({
          icon: 'none',
          title: '小7脑子瓦特了，麻烦重新提交呐！'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.fault{
  height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0 30rpx;
  overflow: hidden;
  position: relative;
  .icon-close{
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 16rpx;
    top: 16rpx;
  }
  .title-box{
    height: 50rpx;
    text-align: center;
    font-size: 34rpx;
    color: #333;
    margin-top: 30rpx;
  }
  .content{
    flex: 1;
    overflow: hidden;
  }
  .scroll{
    height: 100%;
  }
  .content{
    overflow: hidden;
  }
  .cell{
    padding: 20rpx 0;
    .title{
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
    .child{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: -18rpx;
      .item{
        min-width: 158rpx;
        height: 64rpx;
        border: 2px solid #eee;
        border-radius: 14rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #666;
        margin: 18rpx 0 0 18rpx;
        padding: 0 12rpx;
        &.active{
          border: 2px solid #FBB000;
          color: #FBB000;
        }
      }
    }
  }
  .upload-img{
    margin-top: 15rpx;
    padding-top: 30rpx;
    border-top: 1px solid #eee;
    .title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 22rpx;
      color: #999;
      .bold{
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }
    }
    .list{
      display: flex;
      margin-top: 20rpx;
      .item{
        width: 180rpx;
        height: 134rpx;
        overflow: hidden;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-left: 30rpx;
        .img{
          width: 100%;
          height: 100%;
        }
        .icon-del{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .upload{
        border: 2px dashed #D0D0D0;
      }
      .item:first-child{
        margin-left: 0;
      }
    }
  }
  .remarks-box{
    padding-bottom: 30rpx;
  }
  .remarks{
    background-color: #F6F6F6;
    border-radius: 10rpx;
    margin-top: 26rpx;
    overflow: hidden;
    .text-area{
      margin: 10rpx 20rpx 0;
      overflow: hidden;
    }
    .num{
      font-size: 22rpx;
      color: #999;
      text-align: right;
      padding: 0 20rpx 10rpx;
    }
  }
  .btn-box{
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn{
      width: 100%;
      height: 88rpx;
      border-radius: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: #333;
      background-color: #eee;
      &.active{
        background: linear-gradient(0deg, #FDD421, #FFE23E);
      }
    }
  }
  
  .leave-popup{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50rpx 66rpx 30rpx;
    .title{
      font-size: 34rpx;
      color: #333;
      font-weight: bold;
    }
    .content{
      margin-top: 30rpx;
      font-size: 28rpx;
      color: #333;
      line-height: 50rpx;
      text-align: center;
    }
    .btn-box{
      margin-top: 30rpx;
      display: flex;
      .btn{
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        width: 218rpx;
        height: 88rpx;
      }
      .left{
        background-color: #3D3D3D;
        border-radius: 44rpx 0 0 44rpx;
        color: #FFE23E;
        font-size: 28rpx;
      }
      .right{
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        border-radius: 0 44rpx 44rpx 0;
        font-size: 30rpx;
        color: #333;
      }
    }
  }
}
</style>
